{% extends "base.html" %}

{% block title %}首页 - 智能电影推荐系统{% endblock %}

{% block content %}
<div class="container">
    <!-- 欢迎横幅 -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="jumbotron bg-gradient-primary text-white text-center py-5" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px;">
                <div class="container">
                    <h1 class="display-4 fw-bold mb-3">
                        <i class="fas fa-film me-3"></i>智能电影推荐系统
                    </h1>
                    <p class="lead mb-4">基于改进的分层反马太效应算法，为您发现精彩电影</p>
                    <div class="row justify-content-center">
                        <div class="col-md-8">
                            <p class="mb-4">突破传统推荐系统的马太效应，让长尾优质内容重新焕发光彩。我们的系统不仅推荐热门电影，更致力于为您发现那些被埋没的珍宝。</p>
                        </div>
                    </div>
                    <div class="d-grid d-md-block">
                        <a href="{{ url_for('login') }}" class="btn btn-light btn-lg me-3">
                            <i class="fas fa-sign-in-alt me-2"></i>立即体验
                        </a>
                        <a href="{{ url_for('register') }}" class="btn btn-outline-light btn-lg">
                            <i class="fas fa-user-plus me-2"></i>注册账户
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 系统特色 -->
    <div class="row mb-5">
        <div class="col-12 text-center mb-4">
            <h2 class="fw-bold">系统特色</h2>
            <p class="text-muted">革新的推荐算法，带来全新的发现体验</p>
        </div>

        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-balance-scale fa-3x text-primary"></i>
                    </div>
                    <h5 class="card-title">反马太效应</h5>
                    <p class="card-text text-muted">打破"强者愈强"的循环，让优质长尾内容获得应有的曝光机会。</p>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-layer-group fa-3x text-success"></i>
                    </div>
                    <h5 class="card-title">分层推荐</h5>
                    <p class="card-text text-muted">冷启动、测试、成长、成熟、长尾五层架构，精准匹配不同阶段内容。</p>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-user-cog fa-3x text-warning"></i>
                    </div>
                    <h5 class="card-title">个性化画像</h5>
                    <p class="card-text text-muted">深度分析用户偏好，识别探索型、主流型等不同用户类型。</p>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-gem fa-3x text-danger"></i>
                    </div>
                    <h5 class="card-title">长尾发现</h5>
                    <p class="card-text text-muted">专业的长尾内容挖掘，为您发现隐藏的优质电影。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 算法优势 -->
    <div class="row mb-5">
        <div class="col-md-6 mb-4">
            <div class="card border-0 bg-light">
                <div class="card-body p-4">
                    <h4 class="card-title text-primary mb-3">
                        <i class="fas fa-brain me-2"></i>智能算法
                    </h4>
                    <div class="algorithm-features">
                        <div class="feature-item d-flex align-items-center mb-3">
                            <i class="fas fa-check-circle text-success me-3"></i>
                            <span>多样性控制机制</span>
                        </div>
                        <div class="feature-item d-flex align-items-center mb-3">
                            <i class="fas fa-check-circle text-success me-3"></i>
                            <span>测试池渐进式流量扩展</span>
                        </div>
                        <div class="feature-item d-flex align-items-center mb-3">
                            <i class="fas fa-check-circle text-success me-3"></i>
                            <span>长尾内容质量评估</span>
                        </div>
                        <div class="feature-item d-flex align-items-center mb-3">
                            <i class="fas fa-check-circle text-success me-3"></i>
                            <span>用户探索倾向分析</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card border-0 bg-light">
                <div class="card-body p-4">
                    <h4 class="card-title text-primary mb-3">
                        <i class="fas fa-chart-line me-2"></i>系统优势
                    </h4>
                    <div class="advantage-list">
                        <div class="advantage-item d-flex align-items-center mb-3">
                            <i class="fas fa-arrow-up text-primary me-3"></i>
                            <div>
                                <strong>提升内容覆盖率</strong>
                                <div class="text-muted small">让更多优质内容获得曝光机会</div>
                            </div>
                        </div>
                        <div class="advantage-item d-flex align-items-center mb-3">
                            <i class="fas fa-users text-primary me-3"></i>
                            <div>
                                <strong>增强用户满意度</strong>
                                <div class="text-muted small">平衡准确性与发现性的推荐</div>
                            </div>
                        </div>
                        <div class="advantage-item d-flex align-items-center mb-3">
                            <i class="fas fa-seedling text-primary me-3"></i>
                            <div>
                                <strong>促进内容生态健康</strong>
                                <div class="text-muted small">避免马太效应导致的生态失衡</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 使用统计 -->
    <div class="row mb-5">
        <div class="col-12 text-center mb-4">
            <h2 class="fw-bold">使用统计</h2>
            <p class="text-muted">实时系统运行数据</p>
        </div>

        <div class="col-md-3 col-sm-6 mb-3">
            <div class="stat-card text-center p-4">
                <div class="stat-icon mb-2">
                    <i class="fas fa-users fa-2x text-white"></i>
                </div>
                <div class="stat-value" id="total-users-display">-</div>
                <div class="stat-label">注册用户</div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6 mb-3">
            <div class="stat-card text-center p-4">
                <div class="stat-icon mb-2">
                    <i class="fas fa-list fa-2x text-white"></i>
                </div>
                <div class="stat-value" id="total-recommendations-display">-</div>
                <div class="stat-label">推荐次数</div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6 mb-3">
            <div class="stat-card text-center p-4">
                <div class="stat-icon mb-2">
                    <i class="fas fa-mouse-pointer fa-2x text-white"></i>
                </div>
                <div class="stat-value" id="total-interactions-display">-</div>
                <div class="stat-label">用户交互</div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6 mb-3">
            <div class="stat-card text-center p-4">
                <div class="stat-icon mb-2">
                    <i class="fas fa-heartbeat fa-2x text-white"></i>
                </div>
                <div class="stat-value">
                    <span class="health-indicator" id="system-health-indicator"></span>
                    在线
                </div>
                <div class="stat-label">系统状态</div>
            </div>
        </div>
    </div>

    <!-- 开始使用 -->
    <div class="row">
        <div class="col-12">
            <div class="card bg-primary text-white text-center">
                <div class="card-body py-5">
                    <h3 class="card-title mb-3">开始您的个性化推荐之旅</h3>
                    <p class="card-text mb-4">体验革新的推荐算法，发现更多精彩内容</p>
                    <div class="d-grid d-md-block">
                        <a href="{{ url_for('register') }}" class="btn btn-light btn-lg me-3">
                            <i class="fas fa-rocket me-2"></i>免费注册
                        </a>
                        <a href="{{ url_for('login') }}" class="btn btn-outline-light btn-lg">
                            <i class="fas fa-sign-in-alt me-2"></i>立即登录
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 加载系统统计
$(document).ready(function() {
    loadIndexStats();
});

function loadIndexStats() {
    $.ajax({
        url: '/api/system_stats',
        method: 'GET',
        success: function(data) {
            $('#total-users-display').text(formatNumber(data.total_users || 0));
            $('#total-recommendations-display').text(formatNumber(data.total_recommendations || 0));
            $('#total-interactions-display').text(formatNumber(data.total_interactions || 0));

            // 更新健康状态
            const indicator = $('#system-health-indicator');
            indicator.removeClass('health-online health-error health-initializing');
            if (data.system_health === 'Online') {
                indicator.addClass('health-online');
            } else if (data.system_health.includes('Error')) {
                indicator.addClass('health-error');
            } else {
                indicator.addClass('health-initializing');
            }
        },
        error: function() {
            console.log('Failed to load stats');
        }
    });
}
</script>
{% endblock %}